<template>
  <div>
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" placeholder="请输入任务名称" autofocus
      v-model.trim="value" @keyup.enter="addList" />
    </header>
  </div>
</template>

<script>
export default {
  name: 'MyHeader',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  components: {},
  data () {
    return {
      value: ''
    }
  },
  methods: {
    addList () {
      if (!this.value) return
      const obj = {
        play: this.value, id: this.list.length + 1, edit: false
      }
      this.$emit('addList', obj)
      this.value = ''
    }
  },

  computed: {}
}
</script>

<style scoped lang="less"></style>
